<template>
  <view :class="$style.group_members">
    <view :class="$style.group_members_title">群组成员（{{ memberList.length }}）</view>

    <view :class="$style.search_group">
      <input :class="$style.input" v-model="members" type="text" placeholder="群成员搜索" />
      <img :class="$style.ssimg" :src="ssImg" alt="">
    </view>
    <van-index-bar>
      <view :class="$style.memberList_list" v-for="(item, index) in memberList" :key="index">
        <van-index-anchor :index="item.letter" />
        <van-cell :class="$style.memberList_list" v-for="(it, index) in item.list" :key="index">
          <img :class="$style.Img_icon" :src="glyImg" alt="">
          <view :class="$style.cy_group">
            <view :class="$style.cy_group_dw"
              :style="it.dwmc == '指挥中心' ? 'background: #FF6666; color:#fff;width: 120rpx;border-radius: 18rpx;font-size: 24rpx; text-align: center;' : ''">
              {{ it.dwmc }} {{ it.xm }}</view>
            <view :class="$style.cy_group_phone" v-show="it.lxdh != null">{{ it.lxdh }}</view>
          </view>

          <view :class="$style.Img_group">
            <img :class="$style.Img_sp" :src="spImg" alt="">
            <img :class="$style.Img_dh" :src="dhImg" alt="" />
          </view>
        </van-cell>
      </view>

    </van-index-bar>
  </view>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import glyImg from "@/static/images/chat/glytx.png"
import cyImg from "@/static/images/chat/cytx.png"
import spImg from "@/static/images/chat/sp.png"
import dhImg from "@/static/images/chat/dh.png"
import ssImg from "@/static/images/chat/ss.png"
import { useInstantMessage } from '@/store'
import { querymembers } from "@/api";


const members = ref<any>('')
const chatStore = useInstantMessage()

// chatStore.getChatGroup // 拿到 groupId

const list = ref<any>([

])

const memberList = ref<any>([
  // {
  //   letter:'A',
  //   list:[
  //     {
  //       id: 1,
  //       sfwgly: 0,
  //       dwmc: '指挥中心',
  //       xm: null,
  //       icon: glyImg,
  //       lxdh: null
  //     },
  //     {
  //       id: 1,
  //       sfwgly: 0,
  //       dwmc: '石门坎站',
  //       xm: '王强',
  //       icon: glyImg,
  //       lxdh: 12345678910
  //     }
  //   ]
  // },
  // {
  //   letter:'B',
  //   list:[
  //     {
  //      id: 1,
  //       sfwgly: 0,
  //       dwmc: '石门坎站',
  //       xm: '王强',
  //       icon: glyImg,
  //       lxdh: 12345678910
  //     },
  //     {
  //       id: 1,
  //       sfwgly: 0,
  //       dwmc: '石门坎站',
  //       xm: '王强',
  //       icon: glyImg,
  //       lxdh: 12345678910
  //     }
  //   ]
  // },
  //  {
  //   letter:'C',
  //   list:[
  //     {
  //      id: 1,
  //       sfwgly: 0,
  //       dwmc: '石门坎站',
  //       xm: '王强',
  //       icon: glyImg,
  //       lxdh: 12345678910
  //     },
  //     {
  //       id: 1,
  //       sfwgly: 0,
  //       dwmc: '石门坎站',
  //       xm: '王强',
  //       icon: glyImg,
  //       lxdh: 12345678910
  //     }
  //   ]
  // },
  //  {
  //   letter:'D',
  //   list:[
  //     {
  //      id: 1,
  //       sfwgly: 0,
  //       dwmc: '石门坎站',
  //       xm: '王强',
  //       icon: glyImg,
  //       lxdh: 12345678910
  //     },
  //     {
  //       id: 1,
  //       sfwgly: 0,
  //       dwmc: '石门坎站',
  //       xm: '王强',
  //       icon: glyImg,
  //       lxdh: 12345678910
  //     }
  //   ]
  // },

]);

function getList() {
  let params = {
    groupIdList: '@TGS#2AUOP2MI4'
  }
  querymembers(params).then((res: any) => {
    let txlobj = {
      letter: '',
      list: []
    }
    res.data.ryList.map((item: any) => {
      txlobj.letter = item[0].xmSzm
      txlobj.list = item
      memberList.value.push(txlobj)
      console.log(memberList)
    })
  });
};
onMounted(() => {
  getList()
})

</script>


<style lang='less' module>
image {
  width: 66rpx;
  height: 66rpx;
  margin-top: 25rpx;
  margin-right: 20rpx;
}

.group_members {
  width: 100vw;
  height: 100vh;
  padding: 30rpx 0 0 0;
  box-sizing: border-box;
  background: #fff;

  .group_members_title {
    height: 32rpx;
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    margin: 0 30rpx 30rpx 30rpx;
  }

  .input {
    width: 694rpx;
    height: 80rpx;
    background: #F5F6F8;
    border: 2rpx solid #EDEDED;
    border-radius: 39rpx;
    margin: 30rpx;
    padding: 0 20rpx 0 81rpx;
    box-sizing: border-box;
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }

  .search_group {
    position: relative;

    .ssimg {
      position: absolute;
      top: 0rpx;
      left: 50rpx;
      width: 34rpx;
      height: 34rpx;

    }
  }

  .memberList_group {
    padding: 20rpx 40rpx;
    height: calc(100vh - 200rpx);
    overflow: overlay;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;

    .list_group {
      position: absolute;
      right: 10rpx;
      width: 26rpx;
      height: 922rpx;
      text-align: center;
      border-radius: 13rpx;
      overflow: overlay;
      background: rgba(229, 229, 229, 0.76);

    }

    .list_px {
      font-size: 22rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #727272;

    }

    .memberList_list {
      display: flex;
      margin: 0rpx 0 40rpx 0;

      .Img_icon {
        width: 66rpx;
        height: 66rpx;
      }




      .Img_group {
        display: flex;
        justify-content: center;
        align-items: center;

        .Img_sp {
          width: 44rpx;
          height: 44rpx;
          margin-right: 20rpx;
        }

        .Img_dh {
          width: 44rpx;
          height: 44rpx;
          margin-right: 20rpx;
        }

      }

    }

  }
}

.cy_group {
  margin: 0 20rpx;
  width: 300rpx;
  display: flex;
  flex-direction: column;
  // align-items: center;
  align-self: center;

  .cy_group_dw {
    font-size: 24rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }

  .cy_group_phone {
    font-size: 24rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    margin-top: 10rpx;
  }

}
</style>

<style lang='less' scoped>
/deep/.van-cell__value {
  text-align: start;
  display: flex;
  justify-content: space-around;
}
</style>>
